<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>计算属性</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="compute">
		<p>message1: {{message1}}</p>
		<p>倒转 message1: {{reversedMessage}}</p>
		<p>message2: {{message2}}</p>
		<button v-on:click="reversedMessage2">倒转message2</button>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#compute',
			data:{
				message1:'Hello',
				message2:'World'
			},
			computed:{
				reversedMessage:function(){
					return this.message1.split('').reverse().join('')
				}
			},
			methods:{
				reversedMessage2: function(){
					this.message2 = this.message2.split('').reverse().join('')
				}
			}
		})
	</script>
</body>
</html>